<template>
  <!-- 联系我们 -->
    <div class="container mb-40">
        <Breadcrumb :list="['联系我们']" />
        <el-card>
            <div class="main flex justify-content-between">
                <div class="content">
                    <div class="title">
                        <div class="a"></div>
                        <div class="font">联系我们</div>
                    </div>
                    <div class="main-info">
                        <div style="margin-top: 20px;" class="flex">
                            <span class="label iconfont">&#xe62a;</span>
                            <div style="width: 66px;" class="ml-10 iconfont flex justify-content-between">
                                <div>电</div>
                                <div>话：</div>
                            </div>
                            <div class="iconfont">024-23861877</div>
                        </div>
                        <div style="" class="flex">
                            <div style="width: 82px;" class="ml-10 iconfont flex justify-content-between"></div>
                            <div class="iconfont">18524249434（微信同步）</div>
                        </div>
                        <div style="margin-top: 20px;" class="flex">
                            <span class="label iconfont">&#xe618;</span>
                            <div style="width: 66px;" class="ml-10 iconfont flex justify-content-between">
                                <div>邮</div>
                                <div>箱：</div>
                            </div>
                            <div class="iconfont">Lnsmlsf@163.com</div>
                        </div>
                        <div style="margin-top: 20px;" class="flex">
                            <span class="label iconfont">&#xe814;</span>
                            <div style="width: 66px;" class="ml-10 iconfont flex justify-content-between">
                                <div>地</div>
                                <div>址：</div>
                            </div>
                            <div class="iconfont">沈阳市沈河区风雨坛街道青年大街260号</div>
                        </div>
                        <div style="margin-top: 20px;" class="flex align-items-center">
                            <span class="label iconfont">&#xe8bb;</span>
                            <div style="width: 66px;" class="ml-10 iconfont flex justify-content-between">
                                <div>公</div>
                                <div>众</div>
                                <div>号：</div>
                            </div>
                            <img class="img" src="@/assets/images/ewm.png" alt="" />
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="title">
                        <div class="a"></div>
                        <div class="font">留言板</div>
                    </div>
                    <div class="main-info">
                        <el-form :model="form">
                            <el-row class="info-one">
                                <el-col :span="11"><el-form-item label="姓名:">
                                    <el-input style="width:160px" v-model="form.name" placeholder="请输入" /> </el-form-item></el-col>
                                <el-col :span="13" ><el-form-item label="联系电话:">
                                    <el-input style="width:160px" v-model="form.number" placeholder="请输入" /> </el-form-item></el-col>
                            </el-row>

                            <el-form-item class="infotwo" label="留言:">
                                <el-input style="width:420px;"  rows="7" v-model="form.desc" maxlength="300" placeholder="请输入" show-word-limit type="textarea" />
                            </el-form-item>
                            <el-form-item>
                                <div class="btn-content flex justify-content-center ">
                                    <el-button class="btn" type="primary" @click="onSubmit">提交</el-button>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
            <div class="map-content">
                <div id="map-container"></div>
            </div>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import Breadcrumb from "@/components/Breadcrumb.vue";
import { onMounted } from 'vue';

const form = reactive({
  name: "",
  number: "",
  desc: "",
});

const onSubmit = () => {
  console.log("submit!");
};

onMounted(() => {
    // 在组件挂载后执行的代码
    const map = new BMapGL.Map("map-container");
    const point = new BMapGL.Point(116.404, 39.915);
    const marker = new BMapGL.Marker(point);
    map.centerAndZoom(point, 15);
    map.addOverlay(marker);
});

// import { api } from '@/api'
// const [e,r] = await api.getUserInfo()
// console.log(e, r)
</script>

<style scoped lang="less">
@import "@/assets/style/common.less";
#map-container {
    width: 100%;
    height: 400px;
}
.map-content {
    margin: 0 auto;
    padding: 20px;
}

.main {
    padding: 20px;
    .content {
        width: 540px;
        height: 400px;
        border: 1px solid #eeeeee;
        border-radius: 8px;

        .title {
            font-size: 24px;
            color: #ffffff;
            font-weight: 400;
            line-height: 48px;
            width: 540px;
            height: 48px;
            background-color: #009cf2;
            border-radius: 8px 8px 0 0;
            position: relative;
            .a {
                width: 6px;
                height: 24px;
                line-height: 48px;
                background: #ffffff;
                position: absolute;
                top: 12px;
                left: 24px;
            }
            .font {
                position: absolute;
                left: 42px;
            }
        }

        .main-info {
            font-size: 20px;
            line-height: 30px;
            position: relative;
            padding: 20px 0 0 39px;
        }
        .info-one {
            margin-top: 24px;
            width: 500px;
        }
        .btn-content {
            width: 100%;
        }
        .btn{
            width: 120px;
            height: 40px;
            background-color: #009cf2;
            border-radius: 4px;
        }
    }
}
</style>
